<template>
  <div class="component">
    <component :is="activeName" />
    <div class="flex-sb mt-100">
      <el-button @click="curIndex = curIndex < 2 ? curIndex + 1 : curIndex">下一步</el-button>
      <el-button @click="curIndex = curIndex > 0 ? curIndex - 1 : curIndex">上一步</el-button>
    </div>
  </div>
</template>

<script>
import One from "@/view/component/one.vue";
import Two from "@/view/component/two.vue";
import Three from "@/view/component/three.vue";

export default {
  components: {Three, Two, One},
  data() {
    return {
      curIndex: 0
    }
  },
  computed: {
    activeName() {
      const arr = ['One', 'Two', 'Three']
      return arr[this.curIndex]
    }
  }
}
</script>

<style scoped lang="scss">

</style>